React Hooks
Reactのcomponents(jsx - virutla domを返すもの?) をレンダリングする純粋?関数を記述したい。
その場合に、(レンダリング後の)副作用や、状態、イベントによる動作？などをどう記述する why useState, useReducer, useEffect, useRef, useContext, useCallback, useMemo という関数による返り値を操作？することにする
They let you use state and other React features without writing a class.
関数コンポーネントで stateや他の機能を使うためのもの。
useState, useEffect, ....
useStateは、
Vue.jsでの data(),methodsみたいなもの? const [count, setCount] = useState(initialState)
countというstateについて宣言？する
componentの中で、setCount( prev => prev + 1) とする、
setCountは関数で, その時のstateの値を取って、値をmutate?する
useEffectは、
つまりuseEffectとは、「関数の実行タイミングをReactのレンダリング後まで遅らせるhook」です。
クラスコンポーネントでのライフサイクルメソッドに当たります。
引数が２つで、最初は副作用させたい関数。２つ目は、
実際には、第2引数を省略するケースはほとんどありません。
[]のみだと、初回のみ
state変数? を入れれば、そのstate変数に変化( useState(s) ? みたいな形?)があった時。
クリーンアップとはイベントリスナの削除、タイマーのキャンセルなどのことです
クリーンアップ関数を返すパターンは、使いどころありそう...
useContextは、
ok
useReducerは、#Reducer
Reduxで実現していたstate管理が、useContext & useReducerで実現できるようになり、Reduxが不要になってきました
外部APIからのデータ取得は、
useEffect(), useReducer()を使う（えばよい)
useEffect Domのライフサイクルのフックで動作させる
useContext グローバルとみなすデータで使う（自分の理解は後回しでよい)
useReducer const [state, dispatch] = useReducer(reducer, '初期値')
reducerは state更新のロジックが書かれた？関数
dispatchは、reducer実行を呼び出す関数?
useRef
コンポーネントの再描画はしたくないけど、内部に保持している値だけを更新したい場合は、保持したい値をuseStateではなく、useRefを利用するのが良さそうです
わかりやすいので、ここから理解することにした。